<template>
	<view class="content">
		<canvas @click="previewImage()" class="pic-canvas" :style="{'height':height+'px','width':width+'px'}" canvas-id="imagecanvas" ></canvas>
		<view class="form-row">
			<view class="form-label">头像设置</view>
			<view class="select-photo" @click="chooseImage()">
				<image class="img-photo" v-if="imagePath.length==0"  src="../../static/picture.png" mode="aspectFit"></image>
				<image class="img-photo" v-if="imagePath.length>0"  :src="imagePath" mode="aspectFit"></image>
			</view>
			<view class="form-items">
				<view class="form-button" :class="{'selected':iconPosition=='LEFT'}" @click="changeIconPosition('LEFT')">左</view>
				<view class="form-button" :class="{'selected':iconPosition=='RIGHT'}" @click="changeIconPosition('RIGHT')">右</view>
			</view>
			<view class="form-label">昵称设置</view>
			<view class="form-items">
				<input class="text-input" v-model="nickname"  placeholder="输入昵称" ></input>
			</view>
			<view class="form-label">遮罩设置</view>
			<view class="form-items">
				<view class="form-button" :class="{'selected':currentMask=='black'}" @click="changeMask('black')">深色</view>
				<view class="form-button" :class="{'selected':currentMask=='white'}" @click="changeMask('white')">浅色</view>
			</view>
			<view class="form-label">文字设置</view>
			<view class="form-items">
				<view class="form-button" :class="{'selected':textPosition=='TOP'}" @click="changeTextPosition('TOP')">TOP</view>
				<view class="form-button" :class="{'selected':textPosition=='MIDDLE'}" @click="changeTextPosition('MIDDLE')">MIDDLE</view>
				<view class="form-button" :class="{'selected':textPosition=='BOTTOM'}" @click="changeTextPosition('BOTTOM')">BOTTOM</view>
			</view>
			<view class="form-items">
				<textarea class="text-input" v-model="text" type="text" auto-height="true" style="padding:5px;"></textarea>
			</view>

		</view>
		<view class="btn-generator" @click="drawImage()">生成图片</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				nickname:'',
				imagePath:'',//头像地址
				iconWidth:60,
				imageUrl:'',
				image:'',
				text:'',
				iconPosition:'LEFT',
				width:0,//画布宽度
				height:0,//画布高度
				blackMask:{
					background:"rgba(0,0,0,0.5)",
					color:"#ffffff"
				},
				whiteMask:{
					background:"rgba(255,255,255,0.5)",
					color:"#000000"
				},
				textPosition:"MIDDLE",
				currentMask:"black"
			}
		},
		methods: {
			previewImage(){
				uni.canvasToTempFilePath({
					canvasId:'imagecanvas',
					success:(res)=>{
						console.log("画布保存为临时文件",res);
						uni.previewImage({
							urls:[res.tempFilePath],
							current:res.tempFilePath
						})
					}
				})
			},
			changeTextPosition(textPosition){
				this.textPosition=textPosition;
			},
			changeMask(mask){
				this.currentMask=mask;
			},
			changeIconPosition(position){
				this.iconPosition=position;
			},
			chooseImage(){
				uni.chooseImage({
					count:1,
					sourceType:['camera','album'],
					sizeType:['compressed'],
					success:(file)=>{
						this.imagePath=file.tempFilePaths[0];
					}
				})
			},
			/**
			 * 绘图方法
			 */
			drawImage(){
				uni.getImageInfo({
					src:this.imageUrl+this.image,
					success:(imageResult)=>{
						console.log("海报图片信息",imageResult);
						//海报图片高度
						var imageHeight=imageResult.height;
						//海报图片宽度
						var imageWidth=imageResult.width;
						//画布宽度
						this.width=uni.getSystemInfoSync().screenWidth;
						//根据海报图片宽高比例计算出的画布高度
						this.height=parseInt((
							this.width*imageHeight/imageWidth)
							.toFixed(0));
						
						var context=uni.createCanvasContext("imagecanvas");
						//清空画布
						context.clearRect(0,0,this.width,this.height);
						context.draw(true);
						
						context.drawImage(
							imageResult.path,
							0,0,imageWidth,imageHeight,
							0,0,this.width,this.height
						);
						context.draw(true);
						if(this.currentMask=='black'){
							context.setFillStyle("rgba(0,0,0,0.5)");
						}else{
							context.setFillStyle("rgba(255,255,255,0.5)");
						}
						context.fillRect(0,0,this.width,this.height);
						
						context.draw(true);
						if(this.currentMask=='black'){
							context.setFillStyle("#ffffff");
						}else{
							context.setFillStyle("#000000");
						}
						
						context.setFontSize(16);
						//计算屏幕最多一行能显示多少字
						var maxTextLength=parseInt((this.width/16).toFixed(0))-4;
						//如果海报文案长度大于最多字数，按最多字数截断文案
						if(this.text.length>maxTextLength){
							this.text=this.text.substring(0,maxTextLength);
						}
						//计算文本宽度
						var textWidth=16*this.text.length;
						//计算文本水平居中时，x坐标位置
						var textLeft=(this.width-textWidth)/2;
						//计算文本垂直居中时，y坐标位置
						var textTop=(this.height-16)/2;
						if(this.textPosition=='MIDDLE'){
							context.fillText(this.text,textLeft,textTop);
						}else if(this.textPosition=='TOP'){
							context.fillText(this.text,textLeft,16+16);
						}else{
							context.fillText(this.text,textLeft,this.height-this.iconWidth-16-16);
						}
						
						context.draw(true);
						
						
						
						if(this.imagePath.length>0){
							if(this.iconPosition=='LEFT'){
								context.fillText(this.nickname,this.iconWidth+10,this.height-((this.iconWidth-16)/2));
								
							}else{
								context.fillText(this.nickname,
								this.width-this.iconWidth-(this.nickname.length*16)-10,
								this.height-((this.iconWidth-16)/2));
							}
							context.draw(true);
							
							uni.getImageInfo({
								src:this.imagePath,
								success:(iconImage)=>{
									var iconWidth=iconImage.width;
									var iconHeight=iconImage.height;
									if(this.iconPosition=='LEFT'){
										context.drawImage(
											iconImage.path,
											0,0,iconWidth,iconHeight,
											0,(this.height-this.iconWidth),this.iconWidth,this.iconWidth
										)
									}else{
										context.drawImage(
											iconImage.path,
											0,0,iconWidth,iconHeight,
											this.width-this.iconWidth,(this.height-this.iconWidth),this.iconWidth,this.iconWidth
										)
									}
									
									
									context.draw(true);
								}
							});
						}
						
						
					}
				})
			}
		},
		onLoad(params) {
			this.imageUrl=this.serverUrl;
			this.image=params.image;
			this.text=params.text;
			
			this.drawImage();
		}
	}
</script>

<style>
	.content{
		align-items: center;
		background-color: #fff;
	}
	.form-label{
		width:100%;
		text-align: center;
		margin-top:15px;
		font-weight: bold;
		margin-bottom:5px;
	}
	.form-row{
		width:100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.form-items{
		display: flex;
		width:70%;
		justify-content: space-between;
	}
	.form-button{
		padding:5px 15px;
		background-color: rgba(199,199,199,0.5);
		color:#000;
		border-radius: 5px;
	}
	.form-button.selected{
		background-color:#FF2442;
		color:#fff;
	}
	.form-items .text-input{
		background:#efefef;
		width:100%;
		margin-top:5px;
		padding:10px;
		border-radius: 10px;
	}
	.pic-canvas{
		margin-top:90px;
	}
	.select-photo .img-photo{
		width:80px;
		height:80px;
	}
	.btn-generator{
		padding:10px;
		width:60%;
		text-align: center;
		background-color: #FF2442;
		color: #fff;
		margin: 20px auto;
		border-radius: 10px;
	}
</style>
